{#
  Renders a toaster container and individual toast messages.
  Can render the initial container or be used with htmx OOB swaps to add toasts dynamically.

  @param id {string} [optional] [default="toaster"] - Unique identifier for the toaster container.
  @param toasts {array} [optional] - An array of toast objects to render initially. See the <code>toast()</code> macro for more details.
  @param attrs {object} [optional] - Additional HTML attributes for the main toaster container div.
  
  Supports caller() for custom toast markup.
#}
{% macro toaster(
  id="toaster",
  toasts=[],
  attrs={}
) %}
<div
  id="{{ id }}"
  class="toaster {{ attrs.class }}"
  {% for key, value in attrs %}
    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
  {% endfor %}
>
{% for item in toasts %}
  {{ toast(
    category=item.category,
    title=item.title,
    description=item.description,
    action=item.action,
    cancel=item.cancel,
    attrs=item.attrs
  ) }}
{% endfor %}
{{ caller() if caller }}
</div>
{% endmacro %}

{#
  Renders a single toast message.

  @param category {string} [optional] [default="success"] - Type of toast ('success', 'error', 'info', 'warning'). Determines icon and ARIA role.
  @param title {string} [optional] - The main title text of the toast.
  @param description {string} [optional] - The secondary description text.
  @param action {object} [optional] - Defines an action button.
    - label {string}: Button text.
    - onclick {string}: JavaScript code to execute on click.
    - url {string}: URL for an anchor link button.
  @param cancel {object} [optional] - Defines a cancel/dismiss button (similar structure to action).
    - label {string}: Button text.
    - onclick {string}: JavaScript code to execute on click.
    - url {string}: URL for an anchor link button.
  @param attrs {object} [optional] - Additional HTML attributes for the toast div.
#}
{% macro toast(
  category="success",
  title="",
  description="",
  action=None,
  cancel=None,
  attrs={}
) %}
<div
  class="toast {{ attrs.class }}"
  role="{{ 'alert' if category == 'error' else 'status' }}"
  aria-atomic="true"
  aria-hidden="false"
  {% if category %}data-category="{{ category }}"{% endif %}
  {% for key, value in attrs %}
    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
  {% endfor %}
>
  <div class="toast-content">
    {% if category in ["error", "success", "info", "warning"] %}
      {% if category == "success" %}
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
      {% elif category == "error" %}
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
      {% elif category == "info" %}
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
      {% elif category == "warning" %}
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
      {% endif %}
    {% endif %}
    <section>
      {% if title %}<h2>{{ title }}</h2>{% endif %}
      {% if description %}<p>{{ description }}</p>{% endif %}
    </section>
    {% if action or cancel %}
      <footer>
        {% if action %}
          {% if action.href %}
            <a
              href="{{ action.href }}"
              class="btn-sm"
              data-toast-action
            >{{ action.label }}</a>
          {% else %}
            <button
              type="button"
              class="btn"
              data-toast-action
              {% if action.onclick %}onclick="{{ action.onclick }}"{% endif %}
            >{{ action.label }}</button>
          {% endif %}
        {% endif %}
        {% if cancel %}
          <button
            type="button"
            class="btn-sm-outline"
            data-toast-cancel
            {% if cancel.onclick %}onclick="{{ cancel.onclick }}"{% endif %}
          >{{ cancel.label }}</button>
        {% endif %}
      </footer>
    {% endif %}
  </div>
</div>
{% endmacro %}